<script setup lang="ts">
import { getAssetsFile } from "@visual/utils";
import { watch, onBeforeMount, ref } from "vue";
import { eventBus } from "@/views/all/visual/template/utils/eventBus";
const props = withDefaults(
  defineProps<{
    propValue?: {
      typeName?: [];
    };
  }>(),
  {
    propValue: () => ({
      typeName: []
    })
  }
);
const imglist = ["posalert", "posestop", "posfix", "posinspection", "posmaintian", "posoffline", "poswarn"];
const imgLabel = {
  posalert: "报警",
  posestop: "停机",
  posfix: "维修",
  posinspection: "巡检",
  posmaintian: "保养",
  posoffline: "离线",
  poswarn: "异常"
};
const imgAble = ref({});
const imgMap = {};
const imgArr = ref([]);
imglist.forEach(item => {
  imgMap[item] = getAssetsFile(item);
  imgAble.value[item] = true;
});
onBeforeMount(() => {
  eventBus.on("posFilterEvent", param => {
    console.log(param);
    const { rawName, active } = param;
    imgAble.value[rawName] = active;
    imgArr.value = [];
    if (props.propValue?.typeName && !props.propValue?.typeName.forEach) return;
    props.propValue?.typeName?.forEach(item => {
      if (imgAble.value[item]) {
        imgArr.value.push(item);
      }
    });
  });
});
watch(
  () => props.propValue.typeName,
  () => {
    imgArr.value = [];
    if (props.propValue?.typeName && !props.propValue?.typeName.forEach) return;

    props.propValue?.typeName?.forEach(item => {
      if (imgAble.value[item]) {
        imgArr.value.push(item);
      }
    });
  },
  {
    immediate: true
  }
);
const showMonitoring = () => {
  console.log("carmera-->");
};
const clickRouter = item => {
  console.log("click", item);
};
</script>

<template>
  <div v-show="imgArr.length > 0" class="loc-point-mark">
    <px-popover
      placement="top"
      :disabled="imgArr.length === 0"
      popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px;"
    >
      <template #reference>
        <px-carousel height="auto" autoplay indicator-position="none" arrow="never">
          <px-carousel-item v-for="(iconName, index) in imgArr" :key="index" style="height: 44px">
            <img class="camera" :src="imgMap[iconName]" height="42px" width="32px" />
          </px-carousel-item>
        </px-carousel>
      </template>
      <template #default>
        <div class="popover-rich-conent" style="display: flex; flex-direction: column; gap: 16px">
          <div v-for="(iconName, index) in imgArr" :key="index" class="popover-rich-conent-item" style="height: 44px" @click="clickRouter(iconName)">
            <img :src="imgMap[iconName]" height="42px" width="32px" @click="showMonitoring" />
            <div>{{ imgLabel[iconName] }}</div>
          </div>
        </div>
      </template>
    </px-popover>
  </div>
  <!-- <div v-else /> -->
</template>

<style lang="scss" scoped>
.camera {
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.popover-rich-conent {
  width: 100%;
  height: auto;

  &-item {
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-radius: 8px;
  }

  &-item:hover {
    background-color: #3b82f6;
  }
}
</style>
